<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" th:href="@{/element-plus/index.css}">
</head>
<body>
<div id="app">
        <el-container>
            <!-- 主体内容 -->
            <el-main>
                <el-row justify="center">
                    <el-col :xs="22" :lg="12" :span="12">
                        <el-tabs type="border-card" class="demo-tabs">
                            <el-tab-pane label="密码登录">
                                <!-- 表单 -->
                                <el-form
                                        :model="user"
                                        :rules="loginFormRules"
                                        ref="loginForm"
                                        label-width="80px"
                                >
                                    <el-form-item
                                            label="用户名"
                                            prop="username"
                                    >
                                        <el-input v-model="user.username" placeholder="用户名/手机号/邮箱"></el-input>
                                    </el-form-item>

                                    <el-form-item
                                            label="密码"
                                            prop="password"
                                    >
                                        <el-input type="password" v-model="user.password"></el-input>
                                    </el-form-item>
                                    <el-form-item
                                            label=""
                                    >
                                        <el-checkbox v-model="user.rememberMe" label="记住我" size="large" />
                                    </el-form-item>

                                    <el-form-item>
                                        <el-button type="primary" @click="login">登录</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-tab-pane>
                            <el-tab-pane label="手机号登录">手机号</el-tab-pane>
                            <el-tab-pane label="邮箱登录">邮箱</el-tab-pane>
                        </el-tabs>
                    </el-col>
                </el-row>
                <el-row  justify="center">
                    <el-col  :xs="22" :lg="12" :span="12">
                        <el-link th:href="@{/register}">没有账号？去注册</el-link>
                    </el-col>
                </el-row>
            </el-main>

        </el-container>
</div>


<script th:inline="javascript">
    // 获取上下文路径
    /*<![CDATA[*/
    const ctx = /*[[ @{/} ]]*/ '';
    /*]]>*/
</script>
<script th:src="@{/js/vue.global.js}"></script>
<script th:src="@{/element-plus/index.js}"></script>
<script th:src="@{/element-plus/icon.js}"></script>
<script th:src="@{/js/axios.min.js}"></script>
<script >

    const app = Vue.createApp({
        data(){
            return {
                user: {},
                loginFormRules:{
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        {validator: this.usernameRule, trigger: "blur"}
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        {validator: this.passwordRule, trigger: "blur"}
                    ],
                }
            }
        },
        methods:{
            usernameRule(prop, value, callback){
                // 用户名规则
                let usernameReg = /^(?=.*[a-zA-Z])[a-zA-Z0-9]{5,20}$/;
                let phoneReg = /^1[3456789]\d{9}$/;
                let emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if (usernameReg.test(value)){
                    callback();
                }else if (phoneReg.test(value)) {
                    callback();
                } else if (emailReg.test(value)) {
                    callback();
                } else {
                    callback(new Error("用户名格式不正确"));
                }
                // callback(new Error("用户名已存在"));
                // callback();
            },
            passwordRule(prop, value, callback) {
                const reg = /^[a-zA-Z][a-zA-Z0-9]{5,19}$/;
                if (reg.test(value)){
                    callback();// 通过
                } else {
                    callback(new Error("密码必须以字母开头，长度在6~20之间，只能包含字母、数字"));
                }
            },
            login(){
                // 表单校验
                this.$refs['loginForm'].validate((valid) => {
                    if (valid){
                        console.log(this.user);
                        // 发送注册请求
                        axios.post(ctx + 'login', this.user).then(resp => {
                            console.log(resp);
                            const data = resp.data;
                            if (data.code == 200){
                                this.$message({
                                    message: "登录成功",
                                    type: "success",
                                    onClose(){
                                        window.location.href = ctx + data.data;
                                    }
                                })
                            } else {
                                this.$message.error(data.msg);
                            }
                        }).catch((error) => {
                            console.error(error);
                        });
                    } else {
                        return false;
                    }
                });
            }
        },
        mounted(){
        }
    });

    app.use(ElementPlus);
    // 注册所有 Element 图标
    for (const iconName in ElementPlusIconsVue) {
        app.component(iconName, ElementPlusIconsVue[iconName]);
    }

    const vm = app.mount('#app');
</script>
</body>
</html>